<template>
    <el-card>   
        <div class="head">
            <el-button type='primary' @click="addBtn" style="font-size: large;">+</el-button>
        </div>
        <el-table class="table-s" :data="state.tableData">
            <el-table-column label="ID" prop="id" />
            <el-table-column label="部门名称" prop="name" />
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.row.id)">
                        删除
                    </el-button>
                    <el-button link type="primary" size="small" @click.prevent="updateRowBtn(scope.row)">
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加部门 -->
        <el-dialog
            v-model="state.dialogVisible"
            title="添加部门"
            width="30%"
            :close-on-click-modal="false"
        >
            <el-form>
                <el-form-item label="部门名称">
                    <el-input v-model="state.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.dialogVisible = false">退出</el-button>
                    <el-button type="primary" @click="handleAdd"
                    >确定</el-button
                    >
                </span>
            </template>
        </el-dialog>

        <!-- 修改部门 -->
        <el-dialog
            v-model="state.dialogVisible1"
            title="修改部门"
            width="30%"
            :close-on-click-modal="false"
        >
            <el-form>
                <el-form-item label="部门名称">
                    <el-input v-model="state.form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.dialogVisible1 = false">退出</el-button>
                    <el-button type="primary" @click="handleUpdate"
                    >确定</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </el-card> 
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'

    const instance = getCurrentInstance()

    const _this = instance.appContext.config.globalProperties

    const state = reactive({
        // 部门信息
        tableData: [],
        // 添加对话框的状态
        dialogVisible: false,
        // 添加输入框
        name: "",
        // 修改对话框的状态
        dialogVisible1: false,
        // 被修改的信息
        form: {}

    })

    onMounted(() => {
        getDepartments()
    })

    // 获取部门信息
    const getDepartments = async() => {
        let res = await _this.$API.department.deparList.get()
        state.tableData = res.data

        // if(res.code == 200){
        //     ElMessage({
        //         type: "success",
        //         message: res.message,
        //     })
        // }
    }

    // 打开添加对话框
    const addBtn = () => {
        state.dialogVisible = true
    }

    // 添加部门
    const handleAdd = async() => {
        let res = await _this.$API.department.deparAdd.post({name: state.name})
        if(res.code == 200){
            ElMessage({
                type: "success",
                message: res.message,
            })
            state.dialogVisible = false
            state.name=""
            getDepartments()
        }
    }

    // 删除
    const deleteRow = (i) => {
        ElMessageBox.confirm(
            '确定要删除掉该部门嘛?',
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(async() => {
            let res = await _this.$API.department.deparDelete.delete({id: i})
            if(res.code == 200){
                ElMessage({
                    type: 'success',
                    message: res.message,
                })
                getDepartments()
            }
            
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
    }

    // 打开修改对话框
    const updateRowBtn = (r) => {
        state.form = r
        state.dialogVisible1 = true
    }

    // 修改
    const handleUpdate = async() => {
        let res = await _this.$API.department.deparUpdate.put(state.form)
        if(res.code == 200){
            ElMessage({
                type: "success",
                message: res.message,
            })
            state.dialogVisible1 = false
            getDepartments()
        }
    }

</script>

<style scoped lang="scss">

</style>
